<!DOCTYPE html>
<html>
		<head>
		<meta charset="utf-8" />
		<title>首页数据</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/echarts.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/indexData.css" />
		<!-- 新增弹窗样式 -->
		<style>
			/* 弹窗遮罩层 */
			.detail-mask {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 1000;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			/* 弹窗容器 */
			.detail-dialog {
				width: 80%;
				max-width: 800px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
				overflow: hidden;
				max-height: 90vh;
				display: flex;
				flex-direction: column;
			}

			/* 弹窗头部 */
			.dialog-header {
				padding: 16px 20px;
				background-color: #f5f7fa;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.dialog-title {
				font-size: 18px;
				font-weight: bold;
				color: #333;
			}

			.close-btn {
				background: none;
				border: none;
				font-size: 20px;
				cursor: pointer;
				color: #666;
			}

			/* 弹窗内容区 */
			.dialog-content {
				padding: 20px;
				overflow-y: auto;
				flex: 1;
			}

			/* 订单详情项样式 */
			.detail-item {
				margin-bottom: 16px;
				padding-bottom: 16px;
				border-bottom: 1px dashed #eee;
			}

			.detail-label {
				font-weight: bold;
				color: #666;
				margin-right: 8px;
			}

			/* 商品列表样式 */
			.product-list {
				margin-top: 10px;
			}

			.product-item {
				display: flex;
				align-items: center;
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f5;
			}

			.product-img {
				width: 80px;
				height: 80px;
				object-fit: cover;
				border-radius: 6px;
				margin-right: 12px;
			}

			.product-info {
				flex: 1;
			}

			.product-name {
				font-weight: 500;
				margin-bottom: 4px;
			}

			.product-spec {
				color: #666;
				font-size: 14px;
			}

			/* 弹窗底部 */
			.dialog-footer {
				padding: 16px 20px;
				border-top: 1px solid #eee;
				text-align: right;
			}

			.confirm-btn {
				padding: 8px 16px;
				background-color: #409eff;
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="bottombox">
				<div id="audiobut"><button class="play-btn" id="playButton"></button>点击开启音频提醒</div>
				<img class="bg1" src="../img/素材1.png" />
				<div id="top">
					<audio controls id="myAudio">
						<source src="../audio/sound.mp3" type="audio/mpeg">
					</audio>
					<img class="tou" src="../img/管理员头像.png" />
					<div class="topinfo">
						<p style="color:dimgray;margin-top: 30px; font-weight: bold;">管理员用户</p>
					</div>
					<div class="isnew" v-show="!todayOrderList.length">现在暂时没有新的订单</div>
				</div>
				<div id="upload">
					<div>
						今日订单量：{{todaycount}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 月订单：{{monthcount}}
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 今日金额：{{todaymoney}}
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 月金额：{{monthmoney}}
					</div>
					<iframe width="500" scrolling="no" height="220" frameborder="0" allowtransparency="true"
						src="https://i.tianqi.com?c=code&id=9&icon=1&site=12&lang=cn"></iframe>
				</div>
				<!-- 今日订单信息 -->
				<div id="todayOrders">
					<div class="orders-title">今日订单信息</div>
					<div class="orders-list" v-if="todayOrderList.length > 0">
						<div class="order-item" v-for="(order, index) in todayOrderList" :key="index">
							<div class="order-avatar">
								<img 
								  :src="order.userurl && order.userurl.includes('https://cakeapp.oss-cn-hangzhou.aliyuncs.com/') ? order.userurl : (order.userurl ? '..' + order.userurl : '/images/default-avatar.png')" 
								  alt="用户头像"
								>
								<!-- <img :src="order.userurl || '..'+order.userurl" alt="用户头像"> -->
								<p class="order-username">用户名:{{ order.userName }}</p>
							</div>
							<div class="order-info">
								<p class="order-time">{{ order.adddate }}</p>
								<div class="order-btns">
									<button size="small" class="el-button el-button--primary"
									    @click="handleReceive(order)">
									    {{ 
									        order.orderstatus === 1 ? '接单' : 
									        order.orderstatus === 2 ? '正在配送' : 
									        '配送完成' 
									    }}
									</button>
									<button size="small" class="el-button el-button--info"
										@click="handleViewDetail(order)">
										订单详情
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="no-orders" v-else>
						<p>已经没有更多订单了</p>
					</div>
				</div>

				<div id="box_data">
					<div id="upload2" style="z-index: 100;">
						<div>
							2025年订单数据
						</div>
					</div>
					<div id="myChart" style="width: 600px; height: 400px;"></div>
				</div>
			</div>

			<!-- 新增订单详情弹窗 -->
			<div class="detail-mask" v-if="showDetailDialog">
				<div class="detail-dialog">
					<div class="dialog-header">
						<div class="dialog-title">订单详情 #{{ currentOrder?.ordernum || '' }}</div>
						<button class="close-btn" @click="closeDetailDialog">&times;</button>
					</div>
					<div class="dialog-content">
						<!-- 订单基础信息 -->
						<div class="detail-item">
							<p><span class="detail-label">订单编号：</span>{{ currentOrder?.ordernum }}</p>
							<p><span class="detail-label">下单时间：</span>{{ currentOrder?.adddate }}</p>
							<p><span class="detail-label">订单状态：</span>
								{{ currentOrder?.orderstatus === 1 ? '待接单' : 
								  currentOrder?.orderstatus === 2 ? '配送中' : 
								  currentOrder?.orderstatus === 3 ? '已完成' : '未知状态' }}
							</p>
						</div>

						<!-- 商品信息 -->
						<div class="detail-item">
							<h4>商品信息</h4>
							<div class="product-list">
								<div class="product-item" v-for="(product, pIndex) in currentOrder?.cakesList" :key="pIndex">
									<img :src="product.cakeUrl" class="product-img" alt="商品图片">
									<div class="product-info">
										<p class="product-name">{{ product.cakeName }}</p>
										<p class="product-spec">尺寸：{{ product.cakesize === 1 ? '6寸' : '4寸' }}</p>
										<p class="product-spec">单价：¥{{ product.cakePricebig || product.cakePrice }}</p>
									</div>
								</div>
							</div>
						</div>

						<!-- 收货信息 -->
						<div class="detail-item">
							<h4>收货信息</h4>
							<p><span class="detail-label">收货人：</span>{{ currentOrder?.consignee }}</p>
							<p><span class="detail-label">联系电话：</span>{{ currentOrder?.phone }}</p>
							<p><span class="detail-label">收货地址：</span>
								{{ currentOrder?.province }} {{ currentOrder?.city }} {{ currentOrder?.district }} {{ currentOrder?.address }}
							</p>
						</div>

						<!-- 金额信息 -->
						<div class="detail-item">
							<h4>金额信息</h4>
							<p><span class="detail-label">商品总金额：</span>¥{{ allProductAmount }}</p>
							<p><span class="detail-label">配送费：</span>¥{{ currentOrder?.deliverypay }}</p>
							<p><span class="detail-label">优惠金额：</span>-¥{{ currentOrder?.money }}</p>
							<p><span class="detail-label">实付款：</span><strong style="color: #ff4d4f;">¥{{ currentOrder?.orderprice }}</strong></p>
						</div>

						<!-- 备注信息 -->
						<div class="detail-item" v-if="currentOrder?.remark">
							<h4>备注信息</h4>
							<p>{{ currentOrder?.remark }}</p>
						</div>
					</div>
					<div class="dialog-footer">
						<button class="confirm-btn" @click="closeDetailDialog">确认</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/initDataindexData.js"></script>
</html>